/**
  date: 2019年6月26日14:47:34
  lastest update: 2019年6月26日14:47:40
  desc: 设备工作内容展示表格
 */
<template>
  <div class="amap-equipment-table">
    <el-card>
      <div slot="header" class="clearfix">
        <span>设备工作内容</span>
      </div>
      <el-table border style="width: 100%" :data="equipmentTableData">
        <el-table-column fixed prop="line" label="操作点" width="120" align="center"></el-table-column>
        <el-table-column prop="lnglat" label="经纬度" width="200" align="center"></el-table-column>
        <el-table-column prop="workMessage" label="工作内容" width="350" align="center"></el-table-column>
        <el-table-column prop="workload" label="数量" width="120" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位" width="160" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <span
              @click="handleDeleteEquipmentData(scope.$index, scope.row)"
              class="table-delete-row"
            >删除</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'amapEquipmentTable',
  props: {
    equipmentTableData: Array
  },
  data() {
    return {
      // 测试数据
      equipmentTableList: [
        {
          tag: 'GJ01',
          lnglat: '114.312321,30.213232',
          workMessage: '吊线 | 墙壁光缆 | 12芯',
          tableShowNum: 1,
          unit: '台'
        },
        {
          tag: 'GJ01-GF01',
          lnglat: '',
          workMessage: '吊线 | 墙壁光缆 | 24芯',
          tableShowNum: 4.9,
          unit: '百米'
        }
      ]
    }
  },
  methods: {
    /**
     * 通知父组件删除表格行
     * @method handleDeleteEquipmentData
     * @author liump
     * @param { number } index 行序列
     */
    handleDeleteEquipmentData(index) {
      this.$emit('handleDeleteEquipmentData', index)
    }
  }
}
</script>

<style scoped>
.amap-equipment-table {
  width: 1100px;
  margin: 20px auto 0;
}
.amap-equipment-table .clearfix {
  text-align: left;
  font-size: 20px;
}
.amap-equipment-table .table-delete-row {
  color: #1abc9c;
  cursor: pointer;
}
</style>